<!DOCTYPE html>
<html>
<head>
    <title>原料客户</title>
    {% include 'system/common/header.html' %}
</head>
<body>
<form class="layui-form" lay-filter="myForm">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief">
                         <ul class="layui-tab-title">
                        <li class="layui-this">客户信息</li>
                             <li>其他信息</li>
                             <li>仓库信息</li>
                        <li>开票信息</li>

                             <li>资质信息</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                               <div class="layui-form-item">
                                    <label class="layui-form-label">客户名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="客户名"  lay-verify="required"  lay-reqtext="请填写客户名" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">身份信息</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="身份信息" lay-verify="required"  lay-reqtext="请填写供应商身份信息" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">注册地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="注册地址"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">归属类别</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="归属类别"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="状态" value="1" title="开启">
                                        <input type="radio" name="状态" value="0" title="关闭" checked>
                                    </div>
                                </div>



                                <div class="layui-form-item">
                                    <label class="layui-form-label">备注</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="备注"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">联系人</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="联系人"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">联系电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="联系电话" lay-verify="phone" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">最后一次审计日期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="最后一次审计日期" lay-verify="date" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">有效期至</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="有效期至" lay-verify="required|date"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="2024-10-16">
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <label class="layui-form-label">审计周期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="审计周期" lay-verify="required|number" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="24">
                                    </div>
                                </div>

                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库名称"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库地址"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库联系人</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库联系人"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库联系电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库联系电话" lay-verify="phone" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库名称2</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库名称2"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库地址2</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库地址2"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库联系人2</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库联系人2"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库联系电话2</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库联系电话2" lay-verify="phone" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                </div>



                            </div>
                            <div class="layui-tab-item">
                                    <div class="layui-form-item">
                                    <label class="layui-form-label">邮箱</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="邮箱" lay-verify="email" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" >
                                    </div>
                                   </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">企业网址</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="企业网址" lay-verify="url" autocomplete="off" placeholder="请输入内容"
                                                   class="layui-input" value="">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">开户行</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="开户行"  autocomplete="off" placeholder="请输入内容"
                                                   class="layui-input" value="">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">收款单位</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="收款单位"  autocomplete="off" placeholder="请输入内容"
                                                   class="layui-input" value="">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">账号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="账号"  autocomplete="off" placeholder="请输入内容"
                                                   class="layui-input" >
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">质保体系评估结果</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="质保体系评估结果"  autocomplete="off" placeholder="请输入内容"
                                                   class="layui-input" value="D">
                                        </div>
                                    </div>
                            </div>

                            <div class="layui-tab-item">
                               <div class="layui-upload">
                                      <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-files">选择多文件</button>

                                      <div class="layui-upload-list">

                                        <table class="layui-table" id="uplord-table">

                                          <colgroup>

                                            <col style="min-width: 100px;" >

                                            <col width="150">
                                              <col width="150">
                                              <col width="150">

                                            <col width="260">

                                            <col width="150">

                                          </colgroup>

                                          <thead>

                                            <th>文件名</th>

                                            <th>大小</th>
                                            <th>有效期至</th>
                                            <th>状态</th>

                                            <th>上传进度</th>

                                            <th>操作</th>

                                          </thead>

                                          <tbody id="ID-upload-files-list"></tbody>

                                        </table>

                                      </div>
                            </div>
                        </div>
                   </div>
                </div>










            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm"  lay-submit="" lay-filter="user-save" id="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
{% include 'system/common/footer.html' %}

<script>
  layui.use(['form', 'jquery'], function () {
    let form = layui.form
    let $ = layui.jquery
    var table =layui.table
    var laydate = layui.laydate;

    var upload = layui.upload;
    var element = layui.element;
    var lordfiles=[]

      // 渲染
     laydate.render({
        elem: '#ID-laydate-demo'
      });
     //物料实例渲染




    form.on('submit(user-save)', function (data) {
         var rowCount = $('#uplord-table tbody tr').length;
            if (rowCount === 0) {


              $.ajax({
                url: '/customer/raw/yp/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                  if (result.success) {
                    layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                      parent.layer.close(parent.layer.getFrameIndex(window.name))//关闭当前页
                      parent.layui.table.reload('user-table')
                    })
                  } else {
                    layer.msg(result.msg, { icon: 2, time: 5000 })
                  }
                }
              });
            }


      return false
    })

      // 制作多文件上传表格

        var uploadListIns = upload.render({
            elem: '#ID-upload-files',
            elemList: $('#ID-upload-files-list'), // 列表元素对象
            url: "{{ url_for('customer.raw.upload_api') }}", // 实际使用时改成您自己的上传接口即可。

            accept: 'file',
            multiple: true,
            unified:true,//多文件只请求一次
            number: 3,//最大上传量
            auto: false,
            bindAction: '#user-save',
            choose: function(obj){

              var that = this;
              var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列

              // 读取本地文件
              obj.preview(function(index, file, result){
                var tr = $(['<tr id="upload-'+ index +'">',
                  '<td>'+ file.name +'</td>',
                  '<td>'+ (file.size/1024).toFixed(1) +'kb</td>',

                    '<td><div><input type="text" name="过期日期"  autocomplete="off" placeholder="yyyy-MM-dd" class="layui-input" id="ID-laydate-demo" ></div></td>',

                 '<td><div>  <input type="checkbox" name="CCC" title="再用|作废" lay-skin="switch" checked> </div></td>',
                  '<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
                  '<td>',
                    '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                    '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',

                  '</td>',
                '</tr>'].join(''));


                // 单个重传
                tr.find('.demo-reload').on('click', function(){
                  obj.upload(index, file);
                });

                // 删除
                tr.find('.demo-delete').on('click', function(){
                  delete files[index]; // 删除对应的文件
                  tr.remove(); // 删除表格行

                  // 清空 input file 值，以免删除后出现同名文件不可选
                  uploadListIns.config.elem.next()[0].value = '';
                });



                that.elemList.append(tr);
                element.render('progress'); // 渲染新加的进度条组件

                laydate.render({
                        elem: '#ID-laydate-demo'
                      });
                 // 重新渲染表单元素
                form.render('checkbox');

              });

            },

            done: function(res, index, upload){ // 成功的回调
                alert(JSON.stringify(res))
                {#alert(JSON.stringify(index))#}
                {#alert(JSON.stringify(upload))#}

              var that = this;
              // if(res.code == 0){ // 上传成功
                var tr = that.elemList.find('tr#upload-'+ index)
                var tds = tr.children();
                tds.eq(5).html(''); // 清空操作
                tds.eq(0).html(res.data.filename)
                lordfiles.push(Object.assign(res, {date: tds.eq(2).find('input').val()}, {state: tds.eq(3).text()}))
                delete this.files[index]; // 删除文件队列已经上传成功的文件
                return;

              //}

              this.error(index, upload);
            },

            allDone: function(obj){ // 多文件上传完毕后的状态回调



                console.log(JSON.stringify(lordfiles))
                // 获取表单其他数据
                  var formData = form.val('myForm');
                    {#alert(JSON.stringify(formData))#}



                    // 将文件上传结果和表单数据合并
                  var allData = Object.assign({}, formData, {fileInfo: lordfiles});
                  $.ajax({
                    url: '/customer/raw/yp/save',
                    data: JSON.stringify(allData),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    success: function (result) {
                      if (result.success) {
                        layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                          parent.layer.close(parent.layer.getFrameIndex(window.name))//关闭当前页
                          parent.layui.table.reload('user-table')
                        })
                      } else {
                        layer.msg(result.msg, { icon: 2, time: 5000 })
                      }
                    }
                  })
                  return false
            },
            before: function(obj){ // obj 参数同 choose
                {#return true#}

                // 获取表单其他数据
                var isValid = form.validate('.layui-input');  // 主动触发验证，v2.7.0 新增

                // 验证通过
                if(isValid) {
                    return true
                }else{

                    return false
                }
            },
            error: function(index, upload){ // 错误回调
              var that = this;
              var tr = that.elemList.find('tr#upload-'+ index);
              var tds = tr.children();
               // 显示重传
              tds.eq(5).find('.demo-reload').removeClass('layui-hide');

            },

            progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
              element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
            }

  });


  })
</script>
<script>
</script>
</body>
</html>